
.page3 {
	position: relative;
	z-index: 20
}
.cards {
	position: absolute;
	z-index: 10;
	left: 0;
	top: 0;
	width: 100%;
}
.cards .card {
	float: left;
	height: 370px;
	position: relative;
	z-index: 1;
	-webkit-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	-ms-transition: all .3s ease-out;
	transition: all .3s ease-out
}
.cards .card a {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	text-decoration: none
}
.cards .card .cont {
	background:#fff;
	cursor: pointer;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	will-change: transform;
	transition: box-shadow .3s ease;
	box-shadow: 0 10px 30px transparent;
}
.cards .card .cont.hover-in {
	-webkit-transition: -webkit-transform .2s ease-out;
	-moz-transition: -moz-transform .2s ease-out;
	-ms-transition: -ms-transform .2s ease-out;
	transition: transform .2s ease-out
}
.cards .card .cont.hover-out {
	-webkit-transition: -webkit-transform .2s ease-in;
	-moz-transition: -moz-transform .2s ease-in;
	-ms-transition: -ms-transform .2s ease-in;
	transition: transform .2s ease-in
}
.cards .card:hover .cont {
	box-shadow: 0 10px 30px rgba(0,0,0,.4)
}
.cards .card_image {
	z-index: 3;
	display: block;
	width: 100%;
	height:190px;
	position: absolute;
	left: 0;
	top: 60px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	background-color: #000;
	-webkit-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out
}
.cards .card_image:after {
	z-index: 3;
	content: " ";
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,.4));
	transition: opacity .3s ease;
	opacity: 0
}
.cards .card:hover .card_image {
	background-color: #222
}
.cards .card .card_detail {
	z-index: 2;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	pointer-events: none;
	-webkit-transform: translateZ(30px);
	-moz-transform: translateZ(30px);
	-ms-transform: translateZ(30px);
	transform: translateZ(30px)
}
.cards .card .card_detail>div {
	display: table;
	width: 100%;
	height: 100%;
	vertical-align: middle;
	text-align: center
}
.cards .card .card_detail>div>div {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	color: #fff;
	text-decoration: none
}
.cards .card h3{position:absolute; top:25px; left:10px; background:url(../img/news_btbg.png) no-repeat left center; height:26px; left:26px; padding-left:28px; color:#333; font-size:14px; line-height:26px;}
.cards .card h4{position:absolute; top:265px; left:0; right:0; padding:0 20px; font-size:14px; font-weight:normal; line-height:26px; height:78px; overflow:hidden; text-align:left;}
.cards .card a h4 span{color:#d0d1d2;}
.cards .card a:hover h4 span{color:#022f53;}